<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--为了使所有浏览器都兼容video-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 600px;
				height: 570px;
				margin: 50px auto;
				border: 3px solid #C69500;
				border-radius: 20px;
				padding-top: 10px;
			}
			.video{
				position: relative;
				width: 600px;
				height: 400px;
				overflow: hidden;
			}
			#myVideo{
				width: 100%;
			}
			.progress{
				width: 600px;
				height: 20px;
				margin-top: 10px;
			}
			.currentTime,.allTime{
				width: 80px;
				height: 20px;
				/*background: #99ff00;*/
				float: left;
				text-align: center;
			}
			.allTime{
				float: right;
			}
			.pro_bat{
				position: relative;
				width: 440px;
				height: 20px;
				background: skyblue;
				margin: 0 auto;
				border-radius: 10px;
			}
			.circle{
				position: absolute;
				width: 20px;
				height: 20px;
				top: 0;
				left: 0%;
				border-radius: 50%;
				background: orange;
			}
			.controls{
				width: 600px;
				height: 60px;
				/*background: red;*/
				margin: 10px;
			}
			.controls p{
				width: 65px;
				height: 65px;
				background: url(img/icon.png);
				float: left;
			}
			#prev{
				background-position: -413px -214px;
				margin-left: 100px;
			}
			#play{
				background-position: -251px -123px;
			}
			#next{
				background-position: -251px -214px;
			}
			#stop{
				background-position: -575px -123px;
			}
			#volume{
				background-position: -575px -214px;
			}
			#fullscreen{
				background: url(img/fullscreen.png);
			}
			.ProScreen{
				width: 600px;
			}
			.wenzi{
				width: 200px;
				height: 20px;
				margin-left: 40px;
				padding-left: 5px;
			}
			.close,.send{
				width: 100px;
				height: 30px;
				margin-left: 50px;
			}
			.anima{
				font-weight: bold;
				animation: wenzi;
				animation-duration: 10s;
				animation-timing-function: linear;
				animation-fill-mode: forwards;
			}
			.tanping{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			@keyframes wenzi{
				0%{
					right: 0px;
					opacity: 1;
				}
				80%{
					opacity: 0.9;
				}
				90%{
					opacity: 0;
				}
				100%{
					right: 600px;
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="video">
				<video id="myVideo" preload="auto"webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow" width="600" height="400">
					<source src="img/80s.mp4" type="video/mp4"></source>
					当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
				</video>
				<div class="tanping"></div>
			</div>
			<!--进度条-->
			<div class="progress">
				<div class="currentTime">00:00:00</div>
				<div class="allTime">00:00:00</div>
				<div value="0" max="0" class="pro_bat">
					<span class="circle"></span>
				</div>
				<!--<progress value="0" max="0" id="pro"></progress>-->    
			</div>
			<!--控制按钮-->
			<div class="controls">
				<p id="prev"></p>
				<p id="play"></p>
				<p id="next"></p>
				<p id="stop"></p>
				<p id="volume"></p>
				<p id="fullscreen"></p>
			</div>
			<!--弹屏按钮-->
			<div class="ProScreen">
				<input type="text" class="wenzi" placeholder="请尽情吐槽" id="" value="" />
				<input type="button" class="send" value="发送" />
				<input type="button" class="close" value="关闭/开启弹屏" />
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				//什么元素 触发 什么事件 实现 什么效果
				//找到元素
				var videoBox = document.querySelector(".video");
				var oBtn = document.querySelector("#play");
				var myVideo = document.querySelector("#myVideo");
				var onOff = false;
				var next = document.querySelector("#next");
				var prev = document.querySelector("#prev");
				var stop = document.querySelector("#stop");
				//声音
				var volume = document.querySelector("#volume");
				var fullscreen = document.querySelector("#fullscreen");
				//当前播放位置
				var currentT = document.querySelector(".currentTime");
				console.log(currentT)
				//总时间
				var  totalT = document.querySelector(".allTime");
				var pro_bat = document.querySelector(".pro_bat");//进度条
				var circle = document.querySelector(".circle");//记录进度条的位置
				var t;//计时器名
				//弹屏
				var ProScreen = document.querySelector(".ProScreen");
				var wenzi = ProScreen.querySelector(".wenzi");
				var send = ProScreen.querySelector(".send");
				var close = ProScreen.querySelector(".close");
				var tanpingBox = document.querySelector(".tanping");
				//播放关闭
				oBtn.onclick = function(){
					onOff= !onOff;
					if(onOff){
						//播放视频
						myVideo.play();
						this.style.backgroundPosition = "-413px -123px";
						t=setInterval(prog,1000);
						myVideo.addEventListener("ended",function(){
							oBtn.style.backgroundPosition = "-251px -123px";
							clearInterval(t);
						})
					}else{
						//暂停视频
						myVideo.pause();
						this.style.backgroundPosition = "-251px -123px";
						clearInterval(t);
					}
				}
				//用一个数组来存储视频路径
				var urls = ["80s.mp4","movie.mp4"];
				var n = 0;
				//下一个视频
				next.onclick = function(){
					n++;
					if(n>urls.length-1){
						n=0;
					}
//					console.log(n);
					myVideo.src = "img/"+urls[n];
					myVideo.play();
					t=setInterval(prog,1000);
					oBtn.style.backgroundPosition = "-413px -123px";
					onOff = true;
					myVideo.addEventListener("ended",function(){
						clearInterval(t);
						oBtn.style.backgroundPosition = "-251px -123px";
					})
				}
				//上一个视频
				prev.onclick = function(){
					n--;
					if(n<0){
						n=urls.length-1;
					}
//					console.log(n);
					myVideo.src = "img/"+urls[n];
					myVideo.play();
					t=setInterval(prog,1000);
					oBtn.style.backgroundPosition = "-413px -123px";
					onOff = true;
					myVideo.addEventListener("ended",function(){
						oBtn.style.backgroundPosition = "-251px -123px";
						clearInterval(t);
					})
				}
				//停止播放
				stop.onclick = function(){
					clearInterval(t);
					myVideo.currentTime = 0;//属性设置或返回音频/视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。
					myVideo.pause();
					onOff = false;
					oBtn.style.backgroundPosition = "-251px -123px";
				}
				//控制声音
				var i = 0;
				var isMax = true;
				volume.onclick = function(){
					if(isMax){
						i+=0.1;
						i = i.toFixed(1);
						i = Number(i);
						if(i==1){
							isMax = false;
						}
					}else{
						i-=0.1;
						i = i.toFixed(1);
						i = Number(i);
						if(i==0){
							isMax = true;
						}
					}
					myVideo.volume = i;
//					console.log(i);
				}
				//控制全屏
				fullscreen.onclick = function(){
					myVideo.webkitrequestFullscreen;
					myVideo.requestFullscreen;
				}
				//进度条
				var totalTime,currT;
				myVideo.addEventListener('canplaythrough',function(){
					totalTime = myVideo.duration;
//					console.log(totalTime);
					prog();
				});
				function prog(){
					currT = myVideo.currentTime;
//					console.log(totalTime);
//					console.log(currT);
					var allTime = getTime(totalTime);
					var currentTime = getTime(currT);
					currentT.innerText = currentTime;
					totalT.innerText = allTime;
					var progress = (currT/totalTime - 0.046) * 100+"%";
					var progre = parseInt(progress);
					if(progre<=0){
						circle.style.left = "0%";
					}else{
						circle.style.left = progress;
					}
				}
				
				//转换时间格式
				function getTime(ms){
					var h = Math.floor(ms/3600)
					var m = Math.floor(ms/60%60);
					var s = Math.floor(ms%60);
					h = h>=10?h:"0"+h;
					m = m>=10?m:"0"+m;
					s = s>=10?s:"0"+s;
					return h+":"+m +":"+s
				}
				
				//弹屏
				var arrColor = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
				//回车发送弹屏
				wenzi.onkeydown = function(event){
					var e = event || window.event;  
	                if(!e.ctrlKey && e.keyCode ==13){
	                	tanPing();
                        return false;//这句话阻止原有的回车换行事件的冒泡执行  
	                }  
				}
				//点击发送弹屏
				send.addEventListener("click",function(){
					tanPing();
				})
				function tanPing(){
					var ball = document.createElement("span");
					var txt = document.createTextNode(wenzi.value);
					ball.appendChild(txt);
					ball.style.position = "absolute";
					var bRight = rand(0,30);
					ball.style.right = bRight + "px";
					var bTop = rand(30,350);
					ball.style.top = bTop+"px";
					var rColor = colorSix();
					console.log(rColor);
					ball.style.color = "#"+rColor;
					ball.classList.add("anima");
					tanpingBox.appendChild(ball);
				}
				function rand(min,max){
					var ran = Math.random()*(max-min) + min;
					return ran;
				}
				function colorSix(){
					var arr = [];
					for(var i=0;i<6;i++){
						var ran = Math.floor(Math.random()*16);
						var ranColor = arrColor[ran];
						arr.push(ranColor);
					}
					var resultColor = arr.join("");
					return resultColor;
				}
				//关闭弹屏
				var isTanP = false;
				close.addEventListener("click",function(){
					isTanP = !isTanP;
					wenzi.disabled = isTanP;
					send.disabled = isTanP;
					if(isTanP){
						tanpingBox.style.opacity="0";
					}else{
						tanpingBox.style.opacity="1";
					}
					var leng = videoBox.children.length;
//					for(var i=0;i<leng;i++){
//						if(videoBox.children[i].classList.contains("anima")){
//							videoBox.removeChild(videoBox.children[i]);
//							videoBox.children[i].style.display = "none";
//						}
//					}
					
				})
				
			}
		</script>
		<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
	</body>
</html>
